<!DOCTYPE html>
<html>
	<head>
   <!--    <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> -->
		<meta charset="UTF-8">
		<!-- import CSS -->
		<link rel="stylesheet" href="/public/css/element-ui/index.css">
		<!-- import Vue before Element -->
		<script src="/public/js/vue.js"></script>
		<!-- 引入 http-vue-loader -->
		<script src="/public/js/http-vue-loader"></script>
		<title>首页</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.el-carousel__container {
				height: 340px;
			}

			.el-aside .el-carousel {
				margin: 5px;
				border: 2px solid #ccc;
				border-radius: 9px;
			}

			.rili {
				margin: 5px;
				border: 2px solid #ccc;
				border-radius: 9px;
				margin-top: 0px;
				border-top: none;
				padding: 20px 0 0 0;
			}

			.rili-block {
				border: 1px solid #ccc;
				/*padding: 20px;*/
			}

			.rili-date {
				display: block;
				width: 100%;
				font-size: 18px;
				border-bottom: 1px solid #ccc;
				text-align: center;
				padding: 10px 0;
			}

			.rili-day {
				font-size: 35px;
				color: blue;
				display: block;
				width: 100%;
				text-align: center;
				margin-top: 5px;
			}

			.rili-time {
				font-size: 24px;
				color: red;
				display: block;
				width: 100%;
				text-align: center;
				margin-top: 5px;
			}

			.rili-xingqi,
			.rili-nongli {
				display: block;
				width: 100%;
				text-align: center;
			}

			.rili-xingqi {
				font-size: 12px;
				line-height: 20px;
			}

			.rili-nongli {
				font-size: 12px;
				color: red;
				line-height: 20px;
			}

			.rili-buttom {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
				align-content: center;
			}

			.rili-buttom .item {
				flex-grow: 0;
				margin-top: 10px;
			}

			.rili .el-badge__content.is-fixed {
				right: 0px;
			}

			.content-main {
				background-color: #f5f5f5;
				border: 1px solid #99bce8;
/*				margin-top: 5px;*/
			}

			.msg-content {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
			}

			.msg-content .block {
				width: 30%;
				height: 125px;
				border-radius: 8px;
				margin: 10px;
				background-color: #fff;

			}

			.msg-content .panel-inner {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
			}

			.msg-content .panel-inner .avatar .el-avatar {
				background-color: #fff;
				color: #47a87f;
				border: 1px solid #47a87f;
				font-size: 36px;
			}

			.msg-content .panel-inner .avatar {
				margin-top: 20px;
				margin-left: 40px;
			}

			.msg-content .panel-inner .title,
			.msg-content .panel-inner .msg-counts {
				display: flex;
				flex-direction: column;
				margin: 20px;
			}

			.msg-content .panel-inner .title .msg-title {
				font-size: 20px;
			}

			.msg-content .panel-inner .title .msg-total {
				font-size: 12px;
				margin-top: 20px;
			}

			.msg-content .panel-inner .msg-counts .item {
				font-size: 12px;
				margin-bottom: 15px;
			}

			.msg-content .panel-inner .msg-counts .item span:last-child {
				font-size: 16px;
				color: red;
			}

			.demo-basic--circle,
			.button-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.button-list {
				margin: 5px;
				margin-bottom: 0px;
				border-bottom-left-radius: 0px;
				border-bottom-right-radius: 0px;
				/*border: 2px solid #ccc;*/
				/*border-radius: 9px;*/
			}

			.button-list .block {
				flex: 1;
				display: flex;
				flex-direction: column;
				/*flex-grow: 1;*/
				margin-top: 10px;
			}

			.button-list .block .el-button {
				padding: 12px 5px !important;
			}


			.demo-basic--circle .block {
				flex: 1;
				display: flex;
				flex-direction: column;
				/*flex-grow: 1;*/
				margin-top: 15px;
				cursor: pointer;
				color: #8492a6;
			}

			.demo-basic--circle .block:hover {
				background-color: #e95352;
				color: #fff;
				border-radius: 8px;
			}

			.demo-basic--circle .block .title {
				margin-top: 10px;
				font-size: 14px;

				text-align: center;
			}

			.demo-basic--circle .el-avatar {
				display: inline-block;
				box-sizing: border-box;
				text-align: center;
				overflow: hidden;
				color: #fff;
				background: #f5f5f5;
				width: 40px;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
			}

			.el-carousel__item h3 {
				color: #475669;
				font-size: 18px;
				opacity: 0.75;
				line-height: 300px;
				margin: 0;
			}

			.el-carousel__item:nth-child(2n) {
				background-color: #f5f5f5;
			}

			.el-carousel__item:nth-child(2n+1) {
				background-color: #f5f5f5;
			}

			.el-header {
				height: 40px !important;
				background-color: #b81f1f;
				color: #fff;
			}

			.el-footer {
				background-color: #000;
				color: #A4A4A4;
				/*text-align: center;*/
				/*line-height: 60px;*/
			}

			.el-aside {
				background-color: #fff;
				color: #333;
				/*text-align: center;*/
				/*line-height: 200px;*/
			}

			.el-main {
				/*background-color: #E9EEF3;*/
				/*color: #333;*/
				padding: 0px;
				padding-top: 0px;
				/*text-align: center;*/
				/*line-height: 160px;*/
			}

			body>.el-container {
				margin-bottom: 40px;
			}

			.el-container:nth-child(5) .el-aside,
			.el-container:nth-child(6) .el-aside {
				/*line-height: 260px;*/
			}

			.el-container:nth-child(7) .el-aside {
				/*line-height: 320px;*/
			}


			.el-row {
				margin-bottom: 20px;
			}

			.el-row:last-child {
				margin-bottom: 0;
			}

			.el-col {
				border-radius: 4px;
			}

			.bg-purple-dark {
				background: #d8d8d8;
			}

			.bg-purple {
				background: #d3dce6;
			}

			.bg-purple-light {
				background: #e5e9f2;
			}

			.grid-content {
				border-radius: 4px;
				min-height: 36px;
				/*margin-top: 5px;*/
			}

			.row-bg {
				padding: 10px 0;
				background-color: #f9fafc;
			}

			.block .el-avatar>img {
				height: auto !important;
				margin: 22px auto;
				width: 36px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>
					<el-row :gutter="20">
						<el-col :span="3">
							<div class="grid-content">
								<a href="/" target="_self">
									<el-image style="width: 200px; height: 38px" src="./statics/images/logo.png" fit="contain"></el-image>
								</a>
							</div>
						</el-col>
						<el-col :span="14">
							<div class="grid-content " style="line-height: 40px;">

								<el-row>
									<el-col :span="2">
										<div class="grid-content" style="text-align: center">
											<el-image style="width: 40px; height: 40px" src="./statics/images/head.png"></el-image>
										</div>
									</el-col>
									<el-col :span="4">
										<div class="grid-content">
											<span>上午好！吴先生</span>
											<i class="el-icon-check"></i>
										</div>
									</el-col>
								</el-row>


							</div>
						</el-col>
						<el-col :span="7">
							<div class="grid-content" style="height: 40px;line-height: 40px;text-align: right">

								<template>
									<el-button plain @click="open1">
										消息测试
									</el-button>
								</template>
								<quanxian-text></quanxian-text>
								<i class="el-icon-refresh-right" style="font-size: 20px"></i>
								<i class="el-icon-full-screen" style="font-size: 20px;margin-left: 10px;"></i>
								<i class="el-icon-close" style="font-size: 20px;margin-left: 10px;"></i>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<el-container>
					<el-aside width="220px">
							<el-carousel trigger="click" :interval="5000" arrow="never" :autoplay="false" :loop="false" indicator-position="outside"
	 >
		<el-carousel-item>
			<div class="demo-basic--circle">
				<div class="block" @click="goto('index')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="放置经常操作的功能" placement="top">
							<img src="./statics/images/shouye.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">个人首页</span>
				</div>
				<div class="block" @click="goto('oa')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="办公申请与审批" placement="top">
							<img src="./statics/images/oa.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">办公管理</span>
				</div>

			</div>

			<div class="demo-basic--circle">
				<div class="block" @click="goto('files')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="公司员工之间文件夹共享" placement="top">
							<img src="./statics/images/file.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">文件收藏</span>
				</div>
				<div class="block" @click="goto('email')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="邮箱管理" placement="top">
							<img src="./statics/images/youjian.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">邮件管理</span>
				</div>


			</div>

			<div class="demo-basic--circle">

				<div class="block" @click="goto('pm')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="人事角色的功能管理模块" placement="top">
							<img src="./statics/images/renshi.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">人事行政</span>
				</div>

				<div class="block" @click="goto('purchase')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="采购角色的功能管理模块，供应商管理，采购管理，工序外发" placement="top">
							<img src="./statics/images/caigou.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">采购管理</span>
				</div>
			</div>

		</el-carousel-item>

		<el-carousel-item>

			<div class="demo-basic--circle">
				<div class="block" @click="goto('xiaoshou')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="销售角色的功能管理模块，主要客户跟进，报价，下单，订单跟踪" placement="top">
							<img src="./statics/images/xiaoshou.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">销售管理</span>
				</div>
				<div class="block" @click="goto('kefu')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="客服角色的功能管理模块，查看和跟踪所有客户的订单" placement="top">
							<img src="./statics/images/kefu.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">客服管理</span>
				</div>


			</div>

			<div class="demo-basic--circle">
				<div class="block">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="网址收藏的管理" placement="top">
							<img src="./statics/images/xiaoshoupingtai.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">营销平台</span>
				</div>
				<div class="block" @click="goto('store')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="仓库角色的功能管理模块，仓库管理，金和石头的调度，例如：员工工单领料" placement="top">
							<img src="./statics/images/cangku.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">仓库管理</span>
				</div>

			</div>

			<div class="demo-basic--circle">
				<div class="block" @click="goto('finance')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="财务角色的功能管理模块，财务管理，成本管理，仓库盘点" placement="top">
							<img src="./statics/images/caiwu.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">财务管理</span>
				</div>
				<div class="block" @click="goto('production')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="收发，设计，起版，品检的角色的功能管理模块，生产管理，工单操作，工序之间的品检 还有 生产进度，成本和效率查看"
						 placement="top">
							<img src="./statics/images/shengchan.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">生产管理</span>
				</div>
			</div>
		</el-carousel-item>

		<el-carousel-item>

			<div class="demo-basic--circle">
				<div class="block" @click="goto('reports')">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="每个角色的报表查询管理" placement="top">
							<img src="./statics/images/baobiao.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">报表分析</span>
				</div>
				<div class="block">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<img src="./statics/images/yingxiao.png" style="object-fit: cover;"></span>
					<span class="title">营销助手</span>
				</div>




			</div>

			<div class="demo-basic--circle">

				<div class="block">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<img src="./statics/images/gongju.png" style="object-fit: cover;"></span>
					<span class="title">实用工具</span>
				</div>

				<div class="block">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="系统的基本设置管理" placement="top">
							<img src="./statics/images/system.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">系统管理</span>
				</div>
			</div>

			<div class="demo-basic--circle">

				<div class="block">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<img src="./statics/images/yun.png" style="object-fit: cover;"></span>
					<span class="title">宝盟平台</span>
				</div>

				<div class="block">
					<span class="el-avatar el-avatar--circle" style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
						<el-tooltip class="item" effect="dark" content="系统的基本设置管理" placement="top">
							<img src="./statics/images/gongyinglian.png" style="object-fit: cover;">
						</el-tooltip>
					</span>
					<span class="title">采购助手</span>
				</div>
			</div>
		</el-carousel-item>
	</el-carousel>
						<div class="button-list">
							<div class="block">
								<el-button @click="open">网络查询</el-button>
							</div>
							<div class="block">
								<el-button>企业微信</el-button>
							</div>
							<div class="block">
								<el-button @click="open2" class="el-icon-search">搜索</el-button>
							</div>
						</div>

						<div class="rili">
							<img style="width: 100%" src="./statics/images/rili.png" alt="">
							<div class="rili-buttom">
								<el-button class="item" size="mini">审批</el-button>
								<el-button class="item" size="mini">公告</el-button>
								<el-button class="item" size="mini">
									<el-badge :value="0" :max="99">
										邮件
									</el-badge>
								</el-button>

							</div>
							<div class="rili-buttom" style="padding-bottom: 20px">
								<el-button class="item" size="mini">日程</el-button>
								<el-button class="item" size="mini">秘书</el-button>
								<el-button class="item" size="mini">电话</el-button>

							</div>
						</div>
					</el-aside>
					 <el-container :style="{height: mainHeight}">
					<el-main style="overflow:hidden" >
							
							<iframe id='iframe-container'  :src='urlMain'  frameborder="0" class="layadmin-iframe" 
							 width="100%" height="100%"  ></iframe>
					</el-main>
    </el-container>
  </el-container>
  				<el-footer style="height: 18px;">
					<el-row>
						<el-col :span="24">
							<div class="grid-content" style="text-align: center;font-size: 12px;min-height: 18px;">
								Copyright ©2013 柏毓MOM系统 All rights reserved
							</div>
						</el-col>
					</el-row>
				</el-footer>
</el-container>
		</div>
	</body>

	<!-- import JavaScript -->
	<script src="/public/js/index.js"></script>
	<script>
		Vue.use(httpVueLoader)
		new Vue({
			el: '#app',
			data: function() {
				return {
					visible: false,
					value: new Date(),
					urlMain: '/home/',
				}
			},
			methods: {
				open1() {
					this.$notify({
						title: '审批通知',
						message: '点击进入审批页面',
						type: 'success'
					});
				},
				open() {
					this.$prompt('请输入搜索内容', '百度搜索', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						// inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
						// inputErrorMessage: '邮箱格式不正确'
					}).then(({
						value
					}) => {
						this.$message({
							type: 'success',
							message: '搜索内容是: ' + value
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						})
					})
				},
				open2() {
					this.$prompt('请输入搜索内容', '全局搜索', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						// inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
						// inputErrorMessage: '邮箱格式不正确'
					}).then(({
						value
					}) => {
						this.$message({
							type: 'success',
							message: '搜索内容是: ' + value
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						})
					})
				},
				goto(link){
					this.urlMain ='./' + link 
				    //this.$emit('transferUrl',link);
					//console.log(link)
					//window.location.href = './' + link + '.html'
					//alert(link+',,,1')
				}
				//iframe页面加载
//				seturlMain(link){
//					this.urlMain =link
//					alert(link)
//				},

			},
			components: {
				// 将组建加入组建库
				//'menus-new': 'url:./component/menus-new.vue',
				'quanxian-text': 'url:./component/quanxian-text.vue',
				'kaoqin': 'url:./component/oa-kaoqin.vue',
			},
			    created () {
			  var height = document.documentElement.clientHeight
			  var newHeight = height - 40 - 30
			  this.mainHeight = newHeight + 'px'
			  return 1
			}
		})
	</script>
</html>
